<template>

	<view class="content">
		<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
		<view style="z-index: 100;position: sticky;top :0;">
			<z-tabs scroll-count="1" bg-color="transparent"
				:active-style="{background: '#CCE2FF',borderRadius: '28rpx',fontWeight: '500',fontSize: '28rpx',color: '#2F80ED',padding: '8rpx 16rpx'}"
				bar-width="0" bar-height="0" :list="tabs1" class="box_2_tabs" @change="onChange">
			</z-tabs>
		</view>
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging ref="pagingRef" v-if="firstLoaded || isCurrentPage" v-model="dataList" @query="queryList"
			:fixed="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item uni-flex uni-justify-between" v-for="(item, index) in dataList" :key="index"
				@click="itemClick(item)">
				<image class="left_img" referrerpolicy="no-referrer" :src="item.baseSmallImgUrl" />
				<view class="uni-flex-item uni-flex uni-column uni-justify-between">
					<view class="title">{{item.itemName}}</view>
					<view class="desc">{{item.itemRemark}}</view>
					<view class="uni-flex uni-justify-between uni-align-center">
						<view>
							<text class="price1">¥</text>
							<text class="price2">{{item.paramMinPrice}}-{{item.paramMaxPrice}}</text>
							<text class="text3">/{{item.paramPriceUnit}}</text>
						</view>
						<uni-icons type="right" size="12" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 设置自己的empty组件，非必须。空数据时会自动展示空数据组件，不需要自己处理 -->
			<template #empty>
				<!-- 空数据提示，添加居中样式 -->
				<view class="empty-container">
					<view class="empty-content">暂无数据</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		nextTick,
		reactive,
		toRefs,
		onUnmounted,
		onMounted
	} from "vue";
	import {
		querySeviceList,
		getSevItemList
	} from "@/api/home.js";
	import {
		getAreaid
	} from "@/common/util.js";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const tabs1 = ref([]);
	const state = reactive({
		current1: 0,
		currentGroupId: null, // 动态 二级类目ID
		currentServiceId: null, // 动态 一级类目ID
		currentAreaId: "", // 动态 areaId
		itemIds: [],
	});
	const {
		current1
	} = toRefs(state);
	const props = defineProps({
		// 当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: 0
		},
		// 当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: 0
		},
		serviceTabs: {
			type: Array,
			default: () => []
		},
	
	});

	const emit = defineEmits(["reload"]);
	// 响应式数据
	const dataList = ref([]);
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);
	const pagingRef = ref(null);
	const initialized = ref(false);

	// 拆分groupList中的id，提取serviceId和groupId
	const splitGroupId = (groupId) => {
		const parts = groupId.split('-');
		return {
			serviceId: parts[0], // 提取'-'符号前面的值
			groupId: parts[1] // 提取'-'符号后面的值
		};
	};

	// 监听currentIndex变化
	watch(
		() => props.currentIndex,
		newVal => {
			if (newVal === props.tabIndex) {
				// 懒加载，当滑动到当前的item时，才去加载
				if (!firstLoaded.value) {
					// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
					nextTick(() => {
						setTimeout(() => {
							isCurrentPage.value = true;
						}, 100);
					});
				}
			}
		}, {
			immediate: true
		}
	);

	// 监听 serviceTabs 变化，初始化或更新 tabs1 和当前选中的子选项卡
	watch(
		() => props.serviceTabs,
		(newVal) => {
			tabs1.value = newVal;
			if (newVal.length > 0) {
				// 使用splitGroupId拆分id获取serviceId和groupId
				const {
					serviceId,
					groupId
				} = splitGroupId(newVal[0].id);
				state.currentGroupId = groupId; // 二级类目ID
				state.currentServiceId = serviceId; // 一级类目ID
			}
			// 如果是当前页，强制刷新数据
			if (props.currentIndex === props.tabIndex) {
				pagingRef.value?.reload();
			}
		}, {
			immediate: true
		}
	);

	const onChange = (e) => {
		// console.log('子项切换', e);
		const selectedTab = tabs1.value[e];
		if (selectedTab && selectedTab.id) {
			// 使用splitGroupId拆分id获取serviceId和groupId
			const {
				serviceId,
				groupId
			} = splitGroupId(selectedTab.id);
			state.currentGroupId = groupId; // 二级类目ID
			state.currentServiceId = serviceId; // 一级类目ID
			pagingRef.value?.reload();
		}
	};

	// 接收父组件传过来的刷新列表要求
	const reload = () => {
		nextTick(() => {
			// 刷新列表数据(如果不希望列表pageNum被重置可以用refresh代替reload方法)
			pagingRef.value?.reload();
		});
	};

	// 暴露方法给父组件
	defineExpose({
		reload
	});

	// 处理地区变化的方法
	const handleAreaChange = (areaId) => {
		state.currentAreaId = areaId;
		if (props.currentIndex === props.tabIndex) {
			pagingRef.value?.reload();
		}
	};

	// 列表数据请求
	const queryList = async (pageNum, pageSize) => {
		try {
			const params = {
				pageNum: pageNum,
				pageSize,
				// 优先使用当前选中的areaId，否则使用默认值
				areaId: state.currentAreaId || getAreaid()
			};

			// 补充其他参数 - 使用拆分后的serviceId和groupId
			if (state.itemIds.length > 0) {
				params.itemIds = state.itemIds.join(',');
			} else {
				params.groupId = state.currentGroupId; // 二级类目ID
				params.serviceId = state.currentServiceId; // 一级类目ID
			}

			

			// console.log('调用getSevItemList的参数:', params);
			const res = await getSevItemList(params);
			// 确保返回格式正确
			if (Array.isArray(res.rows)) {
				pagingRef.value.complete(res.rows);
			} else {
				throw new Error('接口返回数据格式错误，rows不是数组');
			}
		} catch (error) {
			console.error('getSevItemList调用失败:', error.message);
			pagingRef.value.complete(false); // 告诉z-paging加载失败
		}
	};

	// 处理筛选类目ID
	const handleCategoryChange = (data) => {
		if (data?.ids && Array.isArray(data.ids)) {
			state.itemIds = data.ids; // 保存筛选ID
			// console.log('接收到的筛选ID:', state.itemIds);
			// 触发列表刷新
			pagingRef.value?.reload();
		}
	}

	onMounted(() => {
		// 先移除旧监听，避免重复绑定
		uni.$off('areaSelected', handleAreaChange);
		// 绑定新监听
		uni.$on('areaSelected', handleAreaChange);

		// 监听筛选类目变化
		uni.$off('categorySelected', handleCategoryChange);
		uni.$on('categorySelected', handleCategoryChange);
		// 初始化标记
		setTimeout(() => {
			initialized.value = true;
		}, 100);
	});

	// 组件卸载时移除监听
	onUnmounted(() => {
		uni.$off('areaSelected', handleAreaChange);
		uni.$off('categorySelected', handleCategoryChange);
	});

	// 点击item事件
	const itemClick = item => {
		uni.navigateTo({
			url: "/pages/viewSonic/viewSonicDetail?id=" + item.localId
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 14rpx;
		height: calc(100vh - 440rpx);
		background: #F5F5F5;
	}

	.box_2_tabs {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.item {
		background: #ffffff;
		box-shadow: 0px 5rpx 20rpx 0px #e2e8f0;
		border-radius: 20rpx;
		padding: 24rpx 23rpx;
		margin: 26rpx 24rpx 0;

		.left_img {
			width: 203rpx;
			height: 203rpx;
			margin-right: 21rpx;
			border-radius: 20rpx;
		}

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
		}

		.desc {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 33rpx;
			margin-top: 15rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.price1 {
			font-size: 20rpx;
			color: #ff6a47;
		}

		.price2 {
			font-size: 32rpx;
			color: #ff6a47;
		}

		.text3 {
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 28rpx;
		}
	}

	.empty-container {
		min-height: 200rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		// align-items: center;
	}
</style>